<template>
	<view class="main">
		<view class="mask" v-if="maskvisble" @click="maskclick"></view>
		<view class="title">
			<view class="section-title">入库申请单列表</view>
			<view class="newbtn" @click="openApplyForStorage">新建</view>
		</view>
		<view class="form-section" v-if="storageApplications.length > 0">
			<view class="list">
				<view class="head">
					<view class="th th-1"><text>行</text></view>
					<view class="th th-2"><text>仓库</text></view>
					<view class="th th-3"><text>申请单号</text></view>
					<view class="th th-4"><text>申请人</text></view>
					<view class="th th-5"><text>预计入库时间</text></view>
					<view class="th th-6"><text>创建时间</text></view>
					<view class="th th-7"><text>状态</text></view>
					<view class="th th-8"><text>操作</text></view>
				</view>
				<view v-for="(item, index) in storageListForDisplay" :key="index">
					<view class="item" @click="viewDetail(item)">
						<view class="tr tr-1">
							<text>{{ index + 1 }}</text>
						</view>
						<view class="tr tr-2">
							<text>{{ item.warehouse }}</text>
						</view>
						<view class="tr tr-3">
							<text>{{ item.applyForId }}</text>
						</view>
						<view class="tr tr-4">
							<text>{{ item.applyUser }}-{{ item.contactPhone }}</text>
						</view>
						<view class="tr tr-5">
							<text>{{ item.applyDate }}</text>
						</view>
						<view class="tr tr-6">
							<text>{{ formatTimestamp(item.create_time) }}</text>
						</view>

						<view class="tr tr-7">
							<text :class="getStatusClass(item.approval)">{{ getStatusText(item.approval) }}</text>
						</view>
						<view class="tr tr-8 relative">
							<view class="operation" @click="handleEdit(index)">操作</view>
							<view class="edit" v-if="editindex === index">
								<view class="edit_item" @click="dellist(index)">作废</view>
								<view class="edit_item">复制</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="no-data" v-else>
			<view class="">您还没有入库申请单</view>
			<view class="btn_summit" @click="openApplyForStorage">现在申请</view>
		</view>
		<uni-popup ref="detailView" type="top" :isMaskClick=true>
			<applyForDetailView :applyForId="applyForId" :applyForm="applyForm"></applyForDetailView>
		</uni-popup>
	</view>
</template>

<script>
const CouldDb = uniCloud.importObject('getDb');
import { store, mutations } from '@/uni_modules/uni-id-pages/common/store.js';
import { formatTimestamp } from '../../untils/formatTime';
import applyForDetailView from '../applyForDetailView.vue';
export default {
	name: 'appStorageList',
	components: {
		applyForDetailView
	},
	data() {
		return {
			storageApplications: [],
			editindex: -1,
			maskvisble: false,
			applyForId: '',
			applyForm: {}
		};
	},
	computed: {
		userInfo() {
			return store.userInfo;
		},
		storageListForDisplay() {
			return this.storageApplications.filter((item) => item.visable === true);
		}
	},
	mounted() {
		console.log('列表查询');
		this.initData();
	},
	methods: {
		formatTimestamp,
		async initData() {
			try {
				const where = {};
				const list = await CouldDb.getAppForStorageList(where);
				console.log('22222222', list);
				if (list.code) {
					this.storageApplications = list.data;
				} else {
					this.storageApplications = [];
				}
			} catch (e) {
				console.error(e);
			}
		},
		maskclick() {
			this.editindex = -1;
			this.maskvisble = false;
		},
		async dellist(index) {
			console.log(JSON.stringify(this.storageListForDisplay[index]));
			// 边界值检查
			if (index === undefined || index < 0 || !this.storageListForDisplay[index]) {
				uni.showToast({
					title: '数据不存在',
					icon: 'none',
					duration: 2000
				});
				return;
			}

			const item = this.storageListForDisplay[index];
			console.log(item);
			// 确认对话框
			uni.showModal({
				title: '谨慎操作',
				content: `确定作废单号为：${item.applyForId}的申请单？`,
				confirmText: '确认作废',
				cancelText: '取消',
				success: async (res) => {
					if (res.confirm) {
						try {
							// 显示加载中提示
							uni.showLoading({
								title: '处理中...'
							});

							// 调用更新接口
							const result = await CouldDb.updateDB('ApplyForStorage', { applyForId: item.applyForId }, { visable: false });

							// 隐藏加载提示
							uni.hideLoading();

							// 处理更新结果
							if (result.code) {
								uni.showToast({
									title: '作废成功',
									icon: 'success',
									duration: 2000
								});
								const idx = this.storageApplications.indexOf(item.applyForId);
								// 同步更新本地列表（如果需要）
								this.storageApplications.splice(idx, 1);
							} else {
								uni.showToast({
									title: result.msg || '作废失败',
									icon: 'none',
									duration: 2000
								});
							}
						} catch (error) {
							// 异常处理
							uni.hideLoading();
							console.error('作废操作失败:', error);
							uni.showToast({
								title: '操作失败，请重试',
								icon: 'none',
								duration: 2000
							});
						}
					}
				}
			});

			// 关闭编辑状态
			this.editindex = -1;
		},

		openApplyForStorage() {
			uni.$emit('open', 'ApplyForStorage');
		},
		viewDetail(item) {
			this.applyForm = item;
			this.applyForId = item.applyForId;
			this.$refs.detailView.open();
	
		},
		formatDate(dateStr) {
			return dateStr;
		},
		getStatusClass(approval) {
			if (approval.length === 0) {
				return 'status-pending';
			}
			switch (approval[0].status) {
				case 0:
					return 'status-pending';
				case 1:
					return 'status-approved';
				case 2:
					return 'status-rejected';
				case 3:
					return 'status-rejected';
				default:
					return 'status-pending';
			}
		},
		getStatusText(approval) {
			if (approval.length === 0) {
				return '待审核';
			}
			switch (approval[0].status) {
				case 0:
					return '待审核';
				case 1:
					return '已通过';
				case 2:
					return '已拒绝';
				case 3:
					return '已退回';
				default:
					return '待审核';
			}
		},
		handleEdit(index) {
			this.maskvisble = true;
			this.editindex = index;
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/common/global.scss';
.mask {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
}
// 状态样式保持不变
.status-pending {
	color: #ff9800;
	padding: 2rpx 10rpx;
	border-radius: 4rpx;
	background-color: #fff8e1;
}
.status-approved {
	color: #4caf50;
	padding: 2rpx 10rpx;
	border-radius: 4rpx;
	background-color: #e8f5e9;
}
.status-rejected {
	color: #f44336;
	padding: 2rpx 10rpx;
	border-radius: 4rpx;
	background-color: #ffebee;
}

.main {
	padding: 20rpx;
	background-color: #f5f5f5;
	min-height: 100vh;
	min-width: 60%;
}
.title {
	display: flex;
	font-size: 40rpx;
	font-weight: bold;
	color: #333;
	padding: 20rpx 20rpx;
	justify-content: space-between;
	.newbtn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 200rpx;
		height: 60rpx;
		font-size: 32rpx;
		color: #fff;
		background-color: #55aaff;
		border-radius: 30rpx;
		cursor: pointer;
	}
}
.section-title {
	display: flex;
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
	padding-bottom: 10rpx;
	border-bottom: 2rpx solid #f0f0f0;
}
.form-section {
	background-color: #fff;
	border-radius: 12rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}
.list {
	display: flex;
	flex-direction: column;
}
.head {
	display: flex;
	width: 100%;
	margin-bottom: 10rpx;
}
.item {
	display: flex;
	width: 100%;
	font-size: 28rpx;
	margin-bottom: 10rpx;
}

/* 优化表头样式 */
.th {
	display: flex;
	font-weight: 600;
	background-color: #f5f5f5;
	justify-content: center;
	align-items: center;
	font-size: 32rpx;
	margin: 2rpx;
	padding: 10rpx;
	box-sizing: border-box;
}
.th-1 {
	width: 5%;
	justify-content: center;
	align-items: center;
	font-size: 32rpx;
}
.th-2 {
	width: 15%;
}
.th-3 {
	width: 18%;
}
.th-4 {
	width: 15%;
}
.th-5 {
	width: 10%;
}
.th-6 {
	width: 15%;
}
.th-7 {
	width: 10%;
}
.th-8 {
	width: 12%;
}

/* 优化列表行样式 */
.tr {
	display: flex;
	background-color: #f9f9f9;
	margin: 2rpx;
	padding: 10rpx;
	box-sizing: border-box;
	:active {
		background-color: #e8f5e9;
	}
}
.tr-1 {
	display: flex;
	width: 5%;
	justify-content: center;
	align-items: center;
	font-size: 32rpx;
	font-weight: 500;
}
.tr-2 {
	width: 15%;
}
.tr-3 {
	width: 18%;
}
.tr-4 {
	white-space: nowrap;
	width: 15%;
}
.tr-5 {
	width: 10%;
}
.tr-6 {
	width: 15%;
}
.tr-7 {
	width: 10%;
	margin: 0 auto;
}
.tr-8 {
	width: 12%;
}
.relative {
	position: relative;
}
.operation {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: white;
	border-radius: 5rpx;
	background-color: #55aaff;
}
.edit {
	position: absolute;
	top: 50%; /* 紧贴父元素底部 */
	right: 100%;
	z-index: 100; /* 确保在其他内容上方 */
	background-color: #fff; /* 增加背景色避免透明 */
	border: 1px solid #eee; /* 增加边框区分 */
	border-radius: 8rpx;
	min-width: 150rpx; /* 固定最小宽度 */
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.edit_item {
	padding: 10rpx 16rpx;
	text-align: center;
}

.edit_item:hover {
	background-color: #f5f5f5;
}

.edit_item {
	padding: 10rpx 16rpx;
	margin-bottom: 1rpx;
	text-align: center;
}

/* 增加hover效果 */
.edit_item:hover {
	background-color: #f5f5f5;
}
.no-data {
	width: 100%;
	margin-top: 50rpx;
	padding: 0 50rpx;
	color: #ccc;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
</style>
